﻿{extend name="public:base" /}

{block name="css"}
<link href="/static/bootstrap/css/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="__PLUG__/jquery-treegrid-master/css/jquery.treegrid.min.css">

<style>
    .fixed-table-body {
        overflow-x: auto;
        overflow-y: auto;
        height: auto;
    }

    .fixed-table-container .bs-checkbox .th-inner {
        padding: 14px 0;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        border-top: 1px solid #e7eaec;
        line-height: 1.42857;
        padding: 8px;
        vertical-align: inherit;
        text-align: revert;
    }
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <button type="button" class="btn btn-primary btn-lg" onclick="addModelOpen()">新增
                    </button>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="iconfont icon-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <table id="table"></table>
                </div>
            </div>
        </div>
    </div>

    <!--    规格-属性 弹出框    -->
    <div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content animated flipInY">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="modelClose()"><span
                            aria-hidden="true">&times;</span><span
                            class="sr-only">Close</span></button>
                    <h4 class="modal-title">新增</h4>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control skuName" placeholder="请输入名称">

                    <select class="form-control m-b skuSelect" name="id"
                            style="display: none; margin-top: 10px"></select>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" onclick="modelClose()">关闭</button>
                    <button type="button" class="btn btn-primary" id="confirmSku">保存</button>
                </div>
            </div>
        </div>
    </div>

</div>
{/block}

{block name="js"}
<script src="/static/bootstrap/js/bootstrap-table.min.js"></script>
<script src="__PLUG__/jquery-treegrid-master/examples/bootstrap-table-treegrid.js"></script>
<script src="__PLUG__/jquery-treegrid-master/js/jquery.treegrid.min.js"></script>
<script type="text/javascript">
    var $table = $('#table');
    var data = {$list};

    $(function () {
        $table.bootstrapTable({
            data: data,
            idField: 'id',
            dataType: 'jsonp',
            columns: [
                {
                    field: 'check', checkbox: true, formatter: function (value, row, index) {
                        if (row.check == true) {
                            // console.log(row.serverName);
                            //设置选中
                            return {checked: true};
                        }
                    }
                },
                {field: 'name', title: '名称'},
                // {field: 'id', title: 'ID', sortable: true, align: 'center'},
                // {field: 'status', title: '状态', sortable: true, align: 'center', formatter: 'statusFormatter'},
                {field: 'operate', title: '操作', align: 'center', events: operateEvents, formatter: 'operateFormatter'},
            ],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'name',
            //指定父id列
            parentIdField: 'pid',

            onResetView: function (data) {
                //console.log('load');
                $table.treegrid({
                    initialState: 'collapsed',// 所有节点都折叠
                    // initialState: 'expanded',// 所有节点都展开，默认展开
                    treeColumn: 1,
                    // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                    // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                    onChange: function () {
                        $table.bootstrapTable('resetWidth');
                    }
                });

                //只展开树形的第一级节点
                $table.treegrid('getRootNodes').treegrid('expand');

            },
            onCheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas, row, "id", "pid", true);

                // 勾选父类
                selectParentChecked(datas, row, "id", "pid")

                // 刷新数据
                $table.bootstrapTable('load', datas);
            },

            onUncheck: function (row) {
                var datas = $table.bootstrapTable('getData');
                selectChilds(datas, row, "id", "pid", false);
                $table.bootstrapTable('load', datas);
            },
            // bootstrap-table-treetreegrid.js 插件配置 -- end
        });
    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        var buttons = [
            '<a href="#" class="editButton btn btn-white btn-sm" style="margin-left: 5px;"><i class="iconfont icon-edit"></i> 编辑 </a>',
            '<a href="#" class="deleteButton btn-white btn-sm" style="margin-left: 5px;"><i class="iconfont icon-trash"></i> 删除 </a>'
        ].join('');

        if (row.pid == 0) buttons = '<a href="#" class="addButton btn btn-white btn-sm"><i class="iconfont icon-plus" ></i> 新增 </a>' + buttons;

        return buttons
    }

    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'menu') {
            return '菜单';
        }
        if (value === 'button') {
            return '按钮';
        }
        if (value === 'api') {
            return '接口';
        }
        return '-';
    }

    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value === 1) {
            return '<span class="btn btn-primary btn-sm">正常</span>';
        } else {
            return '<span class="btn btn-warning btn-sm">锁定</span>';
        }
    }

    //初始化操作按钮的方法
    window.operateEvents = {
        'click .addButton': function (e, value, row, index) {
            add(row.id);
        },
        'click .editButton': function (e, value, row, index) {
            update(row.id, row.pid, row.name);
        },
        'click .deleteButton': function (e, value, row, index) {
            del(row.id, row.pid);
        }
    };
</script>
<script>
    /**
     * 选中父项时，同时选中子项
     * @param datas 所有的数据
     * @param row 当前数据
     * @param id id 字段名
     * @param pid 父id字段名
     */
    function selectChilds(datas, row, id, pid, checked) {
        for (var i in datas) {
            if (datas[i][pid] == row[id]) {
                datas[i].check = checked;
                selectChilds(datas, datas[i], id, pid, checked);
            }
        }
    }

    function selectParentChecked(datas, row, id, pid) {
        for (var i in datas) {
            if (datas[i][id] == row[pid]) {
                datas[i].check = true;
                selectParentChecked(datas, datas[i], id, pid);
            }
        }
    }

    function test() {
        var selRows = $table.bootstrapTable("getSelections");
        if (selRows.length == 0) {
            alert("请至少选择一行");
            return;
        }

        var postData = "";
        $.each(selRows, function (i) {
            postData += this.id;
            if (i < selRows.length - 1) {
                postData += "， ";
            }
        });
        alert("你选中行的 id 为：" + postData);

    }

    /**
    * 新增规格或者属性
    * */
    function addModelOpen(){
        data_pid = 0;
        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');

        var option = '<option value="0">顶级规格</option>';
        data.forEach(function (val) {
            if (val.pid == 0) option += "<option value='" + val.id + "'>" + val.name + "</option>";
        })
        $('.skuSelect').html(option).show();
    }

    $('.skuSelect').change(function (){
        data_pid = $(this).val();
    })

    /**
    * 列表规格新增属性
    * */
    function listAddModelOpen(id){
        data_pid = id;

        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');
        $('.skuSelect').hide();
    }

    /**
    * 列表编辑规格或属性
    * */
    function listEditModelOpen(id, pid, name){
        data_id = id;
        $('.skuName').val(name);

        if(pid > 0){
            //编辑属性
            data_pid = 0;
            $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
            $('#myModal3').css('display', 'block').addClass('show');

            var option = '';
            data.forEach(function (val) {
                if (val.pid == 0){
                    var selected = '';
                    if(pid == val.id) selected = 'selected';
                    option += "<option value='" + val.id + "' "+ selected +">" + val.name + "</option>";
                }
            })
            $('.skuSelect').html(option).show();

            data_pid = $('.skuSelect').val() ? $('.skuSelect').val() : 0;
        }else{
            //编辑规格
            data_pid = 0;

            $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
            $('#myModal3').css('display', 'block').addClass('show');
            $('.skuSelect').hide();
        }
    }

    function add(id) {
        this.listAddModelOpen(id);
        $('.modal-title').html('新增');
    }

    function del(id, pid) {
        var url = "/admin/manage/delSku";
        $.post(url, {
            id: id,
            pid: pid
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                modelClose();
                window.location.reload();
            }
        }, 'json')
    }

    function update(id, pid, name) {
        this.listEditModelOpen(id, pid, name);
        $('.modal-title').html('编辑');
    }

    /**
     * 关闭 规格-属性 弹框
     * */
    function modelClose() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal3').css('display', 'none').removeClass('show');
        $('.modal-title').html('新增');
        $('.skuName').val('');
        $('.skuSelect').find("option:selected").prop("selected", false);
        data_pid = 0;
        data_id = 0;
    }


    /**
     * 保存
     * */
    var data_pid = 0;
    var data_id = 0;
    $('#confirmSku').click(function () {
        var name = $('.skuName').val();

        if (!name) {
            layer.msg('请输入名称');
            return;
        }

        var url = "/admin/manage/doSku";
        $.post(url, {
            id: data_id,
            pid: data_pid,
            name: name
        }, function (res) {
            layer.msg(res.msg)
            if (res.result == 1) {
                modelClose();
                window.location.reload();
            }
        }, 'json')
    })
</script>
{/block}
